<style>
  .layout{
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    /*height: 40px;*/
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
  .ivu-layout-sider-children {
    height: 645px;
    padding-top: .1px;
    margin-top: -.1px;
  }
  .ivu-layout-sider {
    transition: all .2s ease-in-out;
    position: relative;
    min-width: 0;
  }

</style>
<template>
  <div style="width:100%;height:100%;background-image: url('../static/image/beijing.jpg');">
    <div style="height: 62px;background-image: url('../static/image/title1.png')">
      <div style="float: left;height: 52px;width: 120px;"><img style="width: 100%;height: 100%" src="../../static/image/aixin.gif"/></div>
      <div style="float:left;margin-left:1%;height: 40px;margin-top: 6px;width: 200px;float: left;color: lavenderblush;font-size: 30px">博客管理系统:</div>
    </div>
    <div class="layout" style="width: 100%;margin-top: 5px">
      <Layout>
        <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed">
          <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">

            <MenuItem name="1-1" @click.native="hehe(1)">
              <Icon type="ios-navigate"></Icon>
              <span >家人情况</span>
            </MenuItem>

            <MenuItem name="1-2" @click.native="hehe(2)">
              <Icon type="search"></Icon>
              <span>简历分析</span>
            </MenuItem>
            <MenuItem name="1-3" @click.native="hehe(3)">
              <Icon type="settings"></Icon>
              <span>文章管理</span>
            </MenuItem>
            <MenuItem name="1-4" @click.native="hehe(4)">
              <Icon type="settings"></Icon>
              <span>日志管理</span>
            </MenuItem>
            <MenuItem name="1-5" @click.native="hehe(5)">
              <Icon type="settings"></Icon>
              <span>图片管理</span>
            </MenuItem>
            <MenuItem name="1-6" @click.native="hehe(6)">
              <Icon type="settings"></Icon>
              <span>音乐管理</span>
            </MenuItem>
          </Menu>
          <div slot="trigger"></div>
        </Sider>
        <Layout>
          <Header class="layout-header-bar"></Header>
          <Content :style="{margin: '10px', background: '', minHeight: '220px'}">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </div>
    <div style="height: 40px;background-color: black;  margin-top: 6px;  font-size: 25px;color: white;text-align: center;"><p>Design By Lisen...</p></div>

  </div>

</template>
<script>
  export default {
    data () {
      return {
        isCollapsed: false
      };
    },
    components:{

    },
    methods:{
      hehe(index){
        switch(index)
        {
          case 1:
            this.$router.push({path:'/showPerson'})
            break;
          case 2:
            this.$router.push({path:'/showJianli'})
            break;
          case 3:
            this.$router.push({path:'/showArticle'})
            break;
          case 4:
            this.$router.push({path:'/showLogger'})
            break;
          case 5:
            this.$router.push({path:'/showPics'})
            break;
          case 6:
            this.$router.push({path:'/showMusic'})
            break;
          default:
            this.$router.push({path:'/showPerson'})
        }
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    }
  }
</script>
